<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World</h1>
<script>
    var name = 'window'
    var person1 = {
        name: 'person1',
        foo1: function () {
            console.log(this.name)
        },
        foo2: () => console.log(this.name),
        foo3: function () {
            return function () {
                console.log(this.name)
            }
        },
        foo4: function () {
            return () => {
                console.log(this.name)
            }
        }
    }
    var person2 = {name: 'person2'}

    person1.foo1()                          // person1：成员函数
    person1.foo1.call(person2)              // person2：成员函数，替换函数执行的时候的this对象为person2

    person1.foo2()                          // window：箭头函数，this为声明函数的时候的所在上下文中的变量中的this，示例中此时就是window
    person1.foo2.call(person2)              // window：箭头函数，this为声明函数的时候的所在上下文中的变量中的this，示例中此时就是window，与函数执行的时候的当前对象无关；

    person1.foo3()()                        // window：使用function声明函数，该函数的当前对象this默认为window这个全局对象；
    person1.foo3.call(person2)()            // window：使用function声明函数，该函数的当前对象this默认为window这个全局对象；
    person1.foo3().call(person2)            // person2：执行返回的function声明的函数，替换this对象为window；

    person1.foo4()()                        // person1：箭头函数，this为声明函数的时候所在上下文变量中的this，示例中就是foo4成员函数的this当前对象
    person1.foo4.call(person2)()            //person2：箭头函数，this为声明函数的时候所在上下文变量中的this，示例中就是foo4成员函数的this当前对象，但foo4执行的时候已经替换当前对象this为person2
    person1.foo4().call(person2)            // person1：箭头函数，this为声明函数的时候所在上下文变量中的this，示例中就是foo4成员函数的this当前对象，执行箭头函数的时候，因为箭头函数执行的时候是没有this当前对象的。所以替换箭头函数的当前对象this是没有变化的。


</script>
</body>
</html>